﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Ajax_DataView2.aspx.cs" Inherits="Demo_ASPX_Ajax_DataView2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Test Micro Ajax DataView instead of Gridview - 主从模式-自动绑定方式</title>
    <style type="text/css">
        body { font-size: 12px; }
        
        .sys-template { display: none; }
        .left { float: left; width: 198px; height: 193px; overflow-y: scroll; }
        .right { float: left; width: 331px; height: 190px; }
        .customerRow { width: 100%; padding-top: 2px; border-style: solid; border-color: Black; color: Blue; cursor: pointer; }
        .selectedItem { background-color: Gray; }
    </style>
    <script type="text/javascript" language="javascript">

        var masterView = null;
        var detailsView = null;
        window.onload = function () {

            Sys.require([Sys.components.dataView], function () {

                masterView = Sys.create.dataView($get("dvUserList"), { selectedItemClass: "selectedItem" });
                detailsView = Sys.create.dataView($get("dvUserDetails"));

                Sys.bind(detailsView, "data", masterView, "selectedData");

                NorthwindService.GetAllCustomers(function (result) {
                    masterView.set_data(result);
                });
            });

        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnableCdn="true">
        <Services>
            <asp:ServiceReference Path="~/Demo_ASPX/NorthwindService.svc" />
        </Services>
        <Scripts>
            <asp:ScriptReference Name="MicrosoftAjax.js" Path="http://ajax.microsoft.com/ajax/beta/0911/MicrosoftAjax.js" />
            <asp:ScriptReference Path="http://ajax.microsoft.com/ajax/beta/0911/start.debug.js" />
        </Scripts>
    </asp:ScriptManager>
    <div style="width: 540px">
        <div id="divLeft" class="left">
            <div id="dvUserList" class="sys-template">
                <div id="colUserName" class="customerRow" sys:command="Select">
                    {binding CustomerID}
                </div>
            </div>
        </div>
        <div id="divRight" class="right">
            <div id="dvUserDetails" class="sys-template">
                <div>
                    <span>CustomerID:</span> <span>{binding CustomerID}</span>
                </div>
                <div>
                    <span>CompanyName:</span> <span>{binding CompanyName}</span>
                </div>
                <div>
                    <span>ContactName:</span> <span>{binding ContactName}</span>
                </div>
            </div>
        </div>
    </div>
    <div>
        参考文章：http://www.cnblogs.com/warensoft/archive/2010/03/23/1692658.html
    </div>
    </form>
</body>
</html>
